<template>
  <div>
    <div class="out-border layout-width m-auto amend-container">
      <el-form class="form-content" :model="updatedForm" :rules="updaterules" ref="updatedForm" label-width="100px">
        <el-form-item label="分类名称" prop="name" :required="true">
          <el-input v-model="updatedForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上级分类">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="0"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量单位">
          <el-input v-model="updatedForm.productUnit"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="updatedForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="是否显示在导航栏">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="分类图标">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="筛选属性">
          <div>
            <div><el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader><el-button type="medium">删除</el-button></div>
          </div>
        </el-form-item>
        <el-form-item label="关键词"><el-input v-model="updatedForm.keywords"></el-input> </el-form-item>
        <el-form-item label="分类描述"><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="updatedForm.description"> </el-input></el-form-item>
        <el-button type="primary">提交</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import { fetchUpdateProduct } from '@/api/api'
export default {
  name: 'UpdatedProduct',
  data() {
    return {
      updatedForm: {},
      updaterules: {
        keywords: [{ required: true, message: '请输入品牌名称' }],
      },
      options: [{ name: '' }],
      handleExceed: '',
      radio: '',
      fileList: '',
      value: '',
      handleRemove: '',
      beforeRemove: '',
      handlePreview: '',
    }
  },
  methods: {
    async handleUpdateInfo() {
      let u_id = this.$route.query.id
      let res = await fetchUpdateProduct(u_id)
      this.updatedForm = res.data
      console.log(this.updatedForm)
    },
    handleChange() {},
    textarea() {},
  },
  created() {
    this.handleUpdateInfo()
  },
}
</script>
<style lang="scss" scoped>
.amend-container {
  padding: 35px 35px 15px;
}
</style>
